<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="header flex-justify-between">
        <div class="bnts flex-align-center">
          <button class="btn mr5 btn-bg2" @click="addDialog = true">添加供应商</button>
          <button class="btn mr5 btn-bg1">导出供应商</button>
          <router-link to="/busic/base/suprecycle" class="btn btn-bg5">回收站</router-link>
        </div>
        <div class="search flex-align-center">
          <el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-select v-model="value" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-input v-model="input" placeholder="检索" class="input-with-select">
            <template #prepend>
              <el-select class="w100" v-model="select" placeholder="选择">
                <el-option label="工单编号" value="1" />
                <el-option label="工单编号" value="2" />
                <el-option label="工单编号" value="3" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData">
          <el-table-column show-overflow-tooltip prop="date" label="供应商名称" />
          <el-table-column show-overflow-tooltip prop="coderNub" label="供应商等级" width="150" />
          <el-table-column show-overflow-tooltip prop="count" label="供应商分类" width="150 " />
          <el-table-column show-overflow-tooltip prop="city" label="型号" width="100" />
          <el-table-column show-overflow-tooltip prop="count" label="规格" width="100" />
          <el-table-column show-overflow-tooltip prop="count" label="库存" width="100" />
          <el-table-column show-overflow-tooltip prop="count" label="默认仓库" width="150" />
          <el-table-column show-overflow-tooltip prop="city" label="最后更新时间" width="170" />
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <div class="btns flex-justify-between">
                <button class="btn-table bgColor1" @click="toSparelist(scope.$index)">配件</button>
                <button class="btn-table bgColor2" @click="viewDetail(scope.$index)">详细</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="pagina">
          <Pagination @size-change="getSizeList" @current-change="getNumList"
        /></div>
      </div>

      <!-- 添加供应商弹窗 -->
      <el-dialog
        v-model="addDialog"
        title="添加供应商"
        width="700px"
        :draggable="true"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        class="add-dialog"
        top="8vh"
      >
        <div class="form">
          <el-form :model="form" :inline="true" label-width="90px">
            <el-form-item label="供应商名称" class="el-item">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="供应商编码" class="el-item">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="对接人员" class="el-item">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="更新时间" class="el-item">
              <el-input v-model="now" readonly />
            </el-form-item>
            <el-form-item label="联系手机" class="el-item">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="供应商分类" class="el-item">
              <el-select
                v-model="value1"
                class="form-select"
                placeholder="可多选"
                filterable
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
            </el-form-item>
            <el-form-item label="企业电话" class="el-item">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="供应商等级" class="el-item">
              <el-select
                v-model="value"
                class="form-select"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
            </el-form-item>
            <el-form-item label="企业传真" class="el-item">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="默认仓库" class="el-item">
              <el-select
                v-model="value"
                class="form-select"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
            </el-form-item>
            <el-form-item label="企业全称" class="el-item">
              <el-input v-model="form.name" class="full-name" />
            </el-form-item>
            <el-form-item label="企业地址" class="el-item">
              <el-select
                v-model="value"
                class="addr-select"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
              <el-select
                v-model="value"
                class="addr-select"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
              <el-select
                v-model="value"
                class="addr-select"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
              <el-select
                v-model="value"
                class="addr-select"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
              <el-input
                v-model="form.name"
                class="addr-detail"
                maxlength="200"
                placeholder="请输入详细地址"
              />
            </el-form-item>
            <el-form-item label="企业类型" class="el-item">
              <el-select
                v-model="value"
                class="form-select"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option v-for="item in options" :key="item.value" :value="item.value"
              /></el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="btns">
          <button class="btn-save">保存</button>
          <button class="btn-cancel" @click="addDialog = false">取消</button>
        </div>
      </el-dialog>

      <!-- 查看供应商详细弹窗 -->
      <el-dialog
        v-model="detailDialog"
        title="供应商管理"
        width="800px"
        :draggable="true"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        class="detail-dialog"
        top="8vh"
      >
        <div class="btns">
          <button class="btn-save">保存</button>
          <button class="btn-cancel" @click="detailDialog = false">取消</button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { Search } from '@element-plus/icons-vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.supplierManagerSet,
  })

  const router = useRouter()
  const input = ref('')
  const value = ref('')
  const value1 = ref('')
  const select = ref('')
  const now = ref()
  const addDialog = ref(false)
  const detailDialog = ref(false)

  const form = reactive({
    name: '',
    region: '数字+字母',
    region2: '开通',
    region3: '开通',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  // 获取当前时间
  const getTime = () => {
    const time = new Date()
    const y = ref(time.getFullYear())
    const m = ref((time.getMonth() + 1).toString())
    m.value = m.value.toString().padStart(2, '0')
    const d = ref(time.getDate().toString())
    d.value = d.value.toString().padStart(2, '0')

    now.value = y.value + '-' + m.value + '-' + d.value + ' ' + time.toLocaleTimeString()
  }
  getTime()

  // 分页改变时
  const getSizeList = (n: any) => {}

  // 页码改变时
  const getNumList = (n: any) => {}

  // 查看配件
  const toSparelist = (n: number) => {
    router.push('/busic/base/spareman')
  }

  // 查看详细
  const viewDetail = (n: number) => {
    detailDialog.value = true
  }

  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]

  const tableData = [
    {
      date: 'LS23050905092127718284',
      name: 'IN2306091736308883',
      coderNub: '233',
      count: '0',
      city: '深圳市南山区维修店',
      address: '2023-04-26 11:31:01',
      zip: 'CA 90036',
      tag: 'Home',
      state: '启用',
    },
    {
      date: '20230602590500824',
      state: '不启用',
      name: '2016-05-02',
      count: '0',
      coderNub: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      count: '0',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
      count: '0',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
      count: '0',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      count: '0',
      coderNub: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
